<template>
  <div class="register-container">
    <van-nav-bar
      title="用户注册"
      left-text="返回"
      left-arrow
      @click-left="handleGoBack"
    />
    <form class="register-form">
      <div class="form-item">
        <label class="label" for="phone">手机号码</label>
        <input
          v-model="phone"
          type="tel"
          id="phone"
          placeholder="请输入手机号码"
          class="input"
          @input="handlePhoneInput"
        />
      </div>
      <div class="form-item">
        <label class="label" for="code">短信验证码</label>
        <div class="itemChild">
          <input
            v-model="code"
            type="text"
            id="code"
            placeholder="请输入6位验证码"
            class="input"
          />
          <button
            type="button"
            class="btn get-code-btn"
            :disabled="!isPhoneValid"
            @click="getVerificationCode"
          >
            {{ codeButtonText }}
          </button>
        </div>
      </div>
      <div class="form-item">
        <label class="label" for="password">设置密码</label>
        <input
          v-model="password"
          type="password"
          id="password"
          placeholder="请设置6-16位密码"
          class="input"
        />
      </div>
      <div class="form-item">
        <label class="label" for="confirmPassword">确认密码</label>
        <input
          v-model="confirmPassword"
          type="password"
          id="confirmPassword"
          placeholder="请再次输入密码"
          class="input"
        />
      </div>
      <div class="form-item agree-item">
        <input
          type="checkbox"
          id="agree"
          v-model="isAgree"
          class="agree-checkbox"
        />
        <label for="agree" class="agree-label">
          我已阅读并同意
          <a href="#" class="protocol-link">《用户协议》</a> 和
          <a href="#" class="protocol-link">《隐私政策》</a>
        </label>
      </div>
      <button
        type="button"
        class="btn register-btn"
        :disabled="!isFormValid"
        @click="handleRegister"
      >
        注册
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { showToast } from 'vant';
import {
  sendSMS, register
} from '/@/api/auth/ytb.ts'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()

// 响应式数据
const phone = ref('');
const code = ref('');
const password = ref('');
const confirmPassword = ref('');
const isAgree = ref(false);
const codeButtonText = ref('获取验证码');
const countdown = ref(0);
// 返回上一页方法
const handleGoBack = () => {
  router.back();
};
// 计算属性：判断手机号码是否有效（简单示例，可根据实际需求完善正则）
const isPhoneValid = computed(() => {
  const reg = /^1[3-9]\d{9}$/;
  return reg.test(phone.value);
});

// 计算属性：判断表单是否可提交
const isFormValid = computed(() => {
  console.log()
  return (
    isPhoneValid.value && code.value &&
    password.value.length >= 6 &&
    password.value.length <= 16 &&
    confirmPassword.value == password.value &&
    isAgree.value
  );
});

// 方法：输入手机号码时的处理
const handlePhoneInput = () => {
  if (countdown.value > 0) return;
  codeButtonText.value = '获取验证码';
};

// 方法：获取验证码（示例，实际需调用后端接口）
const getVerificationCode = () => {
  if (isPhoneValid.value && countdown.value === 0) {
    // 模拟倒计时，实际项目中结合接口请求
    countdown.value = 60;
    const timer = setInterval(() => {
      if (countdown.value > 0) {
        codeButtonText.value = `${countdown.value}s重新获取`;
        countdown.value--;
      } else {
        codeButtonText.value = '获取验证码';
        clearInterval(timer);
      }
    }, 1000);
    // 这里可添加调用后端发送验证码接口的逻辑，如：
    getVficationCode()
  }
};
const getVficationCode = async() => {
  const res = await sendSMS({
    phone: phone.value,
  })
  showToast(res.msg)
}
// 方法：处理注册逻辑（示例，实际需调用后端注册接口）
const handleRegister = async() => {
  if (isFormValid.value) {
    // 调用后端注册接口，传递 phone、code、password 等参数
    console.log('提交注册信息：', {
      phone: phone.value,
      code: code.value,
      password: password.value,
    });
    if(!phone.value) {
      showToast('请填写手机号') 
      return
    }
    if(!code.value) {
      showToast('请填写验证码')
      return
    }
    if(!password.value) {
      showToast('请填写密码')
      return
    }
    const res = await register({
      phone: phone.value,
      code: code.value,
      password: password.value
    })
    if(res.code == 200){
      router.replace({ name: 'login', query: { } })
    }
    showToast(res.msg)
  }
};
</script>

<style lang="less" scoped>

.register-container {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eee;
  font-size: 13px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.register-form {
  display: flex;
  flex-direction: column;
}

.form-item {
  display: flex;
  width: 100%;
  margin-bottom: 16px;
  flex-direction: column;
  .itemChild {
    width: 100%;
    font-size: 13px!important;
    .input {
      width: 70%;
    }
    button {
      width: 30%;
    }
  }
}

.label {
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

.input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.btn {
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.get-code-btn {
  align-self: flex-start;
  background-color: #007bff;
  color: #fff;
  margin-top: 6px;
}

.get-code-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.agree-item {
  flex-direction: row;
  align-items: center;
}

.agree-checkbox {
  margin-right: 8px;
}

.agree-label {
  font-size: 14px;
  color: #666;
}

.protocol-link {
  color: #007bff;
  text-decoration: none;
}

.register-btn {
  background-color: #007bff;
  color: #fff;
}

.register-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>